<template>
	<div id="reservation_edit">
		<v-title title='修改预约记录' text1='预约用户: ' :value1='obj.idCard' text2='预约状态: ' :value2='obj.status' :isShow='isShow'></v-title>
		<div class="d-content">
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="预约业务:">
					<el-select v-model="form.businessType" placeholder="" style="width: 100%;" disabled >
					  <el-option v-for="(item,index) in businessTypeArr" :key="index" :label="item.name"  :value="item.businessId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="预约日期:">
					<el-date-picker 
						disabled 
						type="date" 
						placeholder="" 
						v-model="form.date" 
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						style="width: 100%;">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="预约时间段:">
					<el-select v-model="form.time" placeholder="" style="width: 100%;" disabled >
						<el-option v-for="(item,index) in timeArr" :key="index" :label="item.appoTime"  :value="item.appoTimeId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="拉入黑名单:">
					<el-radio-group v-model="form.isBlack" @change="change">
						<el-radio :label="false">否</el-radio>
						<el-radio  :label="true">是</el-radio>
					</el-radio-group>
					<span class="isblack">
						<el-input-number 
							class="custom-num"
							v-model="form.num" 
							controls-position="right" 
							@change="handleChange" 
							:min="0"
							:disabled="form.isInput"
							label="描述文字">
						</el-input-number> 天内不能再次预约
					</span>
				</el-form-item>
				<el-form-item label="取消此次预约:" >
					<el-radio-group v-model="form.isCancel"> 
						<el-radio :label="false">否</el-radio>
						<el-radio :disabled="disabled" :label="true">是</el-radio>
					</el-radio-group>
				</el-form-item>
				 <el-form-item>
					<el-button class="custom-btn" type="primary" @click="onSubmit">提交</el-button>
				 </el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import vTitle from './view/titleDiv.vue'
	import {getRecordEditInfo,getRecordTimeRange,getRecordBusinessType,getRecordEdit} from '../api/getData.js'
	export default {
		name: "reservation_edit",
		components:{
			vTitle
		},
		data() {
			return {
				value1:'',
				value2:'',
				isShow:true,
				businessTypeArr:[],
				timeArr:[],
				obj:{},
				form:{
					businessType:'',
					date:'',
					time:'',
					isBlack:false,
					num:'',
					isCancel:false,
					isInput:true
				},
				bussinessTypeId:'',
				appoTimeId:'',
				disabled:false
			};
		},
		created() {
			this.getParams()
			// this.getTimeRange()
			this.getBusinessType()
		}, // 创建时
		beforeMount() {}, // 挂载之前
		mounted() {
			this.getEditInfo()
			
		}, // 挂载之后
		beforeUpdate() {}, // 数据更新时调用,在渲染之前
		updated() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed() {}, // 实例销毁后调用
		methods: {
			getParams(){
				this.appoid = this.$route.query.appoId 
			},
			change(e){
				if(this.form.isBlack == true){
					this.form.isCancel = false
					this.form.isInput = false
					this.disabled = true
				}else{
					this.disabled = false
					this.form.isInput = true
				}
			},
			// 获取编辑信息
			getEditInfo(){
				getRecordEditInfo({
					latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
					appoId:this.appoid
				}).then((res) =>{
					console.log(res.data,"获取编辑信息")
					if(res.data.code === 0){
						this.obj = res.data.data
						this.form.businessType = res.data.data.businessName
						this.form.date = res.data.data.appoDate
						this.form.time = res.data.data.appotime
						// this.form.isBlack = res.data.data.bearkFlag
						this.form.num = res.data.data.bearkDay
						this.bussinessTypeId = res.data.data.businessTypeId
						this.appoTimeId = res.data.data.appoTimeId
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 获取时间段
			getTimeRange(){
				getRecordTimeRange({
					// latticeId:JSON.parse(window.sessionStorage.getItem('latticeid'))
				}).then((res) =>{
					console.log(res.data,"时间段")
					if(res.data.code == 0){
						this.timeArr = res.data.data
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 获取业务类型
			getBusinessType(){
				getRecordBusinessType({
					// latticeId:JSON.parse(window.sessionStorage.getItem('latticeid'))
				}).then((res) =>{
					console.log(res.data,"网点业务类型")
					this.businessTypeArr = res.data.data
				}).catch((error) =>{
					console.log(error)
				})
			},
			handleChange(value) {
				// console.log(value);
			},
			changBussinessId(val){
				let obj = {}; 
				obj = this.businessTypeArr.find((item)=>{
					console.log(item)
						return item.businessId === val;
				});
				// console.log(obj)
				this.bussinessTypeId = obj.businessId;
				console.log(this.bussinessTypeId)
			},
			onSubmit(){
				console.log(this.bussinessTypeId,this.appoTimeId)
				getRecordEdit({
					latticeId:JSON.parse(window.sessionStorage.getItem('latticeid')),
					appoId:this.appoid,
					businessTypeId:this.bussinessTypeId,
					appoTimeId:this.appoTimeId,
					appoDate:this.form.date,
					bearkFlag:this.form.isBlack,
					bearkDay:this.form.num,
					cancelFlag:this.form.isCancel,
					updatePerson:1
				}).then((res) =>{
					console.log(res.data,"提交修改")
					if(res.data.code == 0){
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						setTimeout(()=>{
							this.$router.push('/makeReservation/reservationindex')
						},1000)
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch((error) =>{
					console.log(error)
				})
			}
		}
	};
</script>
<style lang='scss'>
	#reservation_edit{
		font-size: 14px;
		.d-content{
			background: #fff;
			margin-top: 24px;
			padding: 40px 0 80px 0;
			.el-form{
				width: 60%;
				margin: auto;
				.isblack{
					margin: 0 20px 0 10px;
				}
				.custom-num{
					width:90px;
				}
				.custom-btn{
					width: 120px;
				}
			}
		}
	}
</style>
